<template xmlns:font-family="http://www.w3.org/1999/xhtml">
  <div class="block_3 flex-col">
    <div class="flex-row">
      <div style="width: 196px;font-size: 20px;color: #171B1E;">
       各项目完成时间及处置时间统计
      </div>
      <div style="flex-grow: 1;text-align: center;font-size: 20px;color: #171B1E">完成时间</div>
    </div>
    <div class="group_12 flex-row" style="margin-bottom: 5px">
      <div class="group_13 flex-col justify-between">
        <div class="block_5 flex-col" style="background-image: linear-gradient(-13deg, #ac39d4 0, #ac39d4 0, #d439c5 100%, #d439c5 100%)"/>
        <div class="block_6 flex-col" style="background-image: linear-gradient(-5deg, #40d4a8 0, #40d4a8 0, #40bad4 100%, #40bad4 100%)"/>
      </div>
      <div class="group_14 flex-col">
        <span class="text_29">{{ meet[dataList[0].meetingType] }}</span>
        <div class="text-wrapper_15">
          <span class="text_30">处置平均时间：</span>
          <span class="text_31">{{ dataList[0].handlingTime || 0}}小时</span>
        </div>
        <span class="text_32">{{ meet[dataList[1].meetingType] }}</span>
        <div class="text-wrapper_16">
          <span class="text_33">处置平均时间：</span>
          <span class="text_34">{{ dataList[1].handlingTime || 0}}小时</span>
        </div>
      </div>
      <div class="group_15 flex-col" style="background: linear-gradient(225deg, #AC39D5 0%, #D539C5 100%);">
        <div class="section_11 flex-row align-center justify-center" style="color: #fff;font-family: DIN-Medium">
          <div class="text-group_1">
            <span class="text_35">{{ dataList[0].completionTime || 0}}</span>
            <span class="text_36">小时</span>
          </div>
        </div>
        <span class="text_37">{{ meet[dataList[0].meetingType] }}</span>
      </div>
      <div class="group_16 flex-col" style="
background: linear-gradient(202.424deg, #40D5A8 0%, #40BAD5 99%);">
        <div class="box_9 flex-col align-center justify-center" style="color: #fff; font-family: DIN-Medium">
          <div class="text-wrapper_17">
            <span class="text_38">{{ dataList[0].completionTime || 0}}</span>
            <span class="text_39">小时</span>
          </div>
        </div>
        <span
            class="paragraph_3"
        >商业项目</span>
      </div>
    </div>
    <div class="group_12 flex-row">
      <div class="group_13 flex-col justify-between">
        <div class="block_5 flex-col" />
        <div class="block_6 flex-col" />
      </div>
      <div class="group_14 flex-col">
        <span class="text_29">{{ meet[dataList[2].meetingType] }}</span>
        <div class="text-wrapper_15">
          <span class="text_30">处置平均时间：</span>
          <span class="text_31">{{ dataList[2].handlingTime || 0}}小时</span>
        </div>
        <span class="text_32">{{ meet[dataList[3].meetingType] }}</span>
        <div class="text-wrapper_16">
          <span class="text_33">处置平均时间：</span>
          <span class="text_34">{{ dataList[3].handlingTime || 0}}小时</span>
        </div>
      </div>
      <div class="group_15 flex-col" >
        <div class="section_11 flex-row align-center justify-center" style="color: #fff;font-family: DIN-Medium">
          <div class="text-group_1">
            <span class="text_35">{{ dataList[2].completionTime || 0}}</span>
            <span class="text_36">小时</span>
          </div>
        </div>
        <span class="text_37">{{ meet[dataList[2].meetingType] }}</span>
      </div>
      <div class="group_16 flex-col" >
        <div class="box_9 flex-col align-center justify-center" style="color: #fff; font-family: DIN-Medium">
          <div class="text-wrapper_17">
            <span class="text_38">{{ dataList[3].completionTime || 0}}</span>
            <span class="text_39">小时</span>
          </div>
        </div>
        <span
            class="paragraph_3"
        >{{ meet[dataList[3].meetingType] }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import {http} from "@/api";

export default {
  data() {
    return {
      meet:['','规划设计方案','工可评审','初步设计','工程变更'],
      constants: {},
        dataList: [
            { completionTime: '', handlingTime: '' },
            { completionTime: '', handlingTime: '' },
            { completionTime: '', handlingTime: '' },
            { completionTime: '', handlingTime: '' },
        ]
    }
  },
    created() {
        http.projectStatic.card().then(res => {
            res.data.forEach((el,index) => {
                this.dataList.splice(index, 1, el)
            })
            console.log(this.dataList)
        })
    },
    methods: {}
}
</script>
<style lang="scss" >
@import "./index.scss";
</style>
